Coffee School

Code Editor

// Creating environment variables var playerSize = 10; var sceneWidth = 300, sceneHeight = 150; var groundHeight = 10; var playAreaHeight = (sceneHeight - groundHeight); // Create the variables to track player movement var playerVel = 0; // Stores the player's velocity var g = 0.4; // The constant acceleration cause by "gravity" // Object width! var objectWidth = 2 * playerSize; // Obstacle Counter var obstacleCounter = 0; // Sets the background colour Crafty.background("#ADD8E6"); // Create the ground! Crafty.e("Solid, 2D, DOM, Color") .attr({x: 0, y: playAreaHeight, w: sceneWidth, h: groundHeight}) .color("#00ff00"); // Create our player's base entity Crafty.e("2D, DOM, Color") // Specifying the components to add .attr({x: 30, y: 30, w: playerSize, h: playerSize}) // Specifying the dimensions and the point to draw from .color("#ff0000") // Specifying the colour of the rectangle .bind("EnterFrame", function() { // Binds the "EnterFrame" event to the entity if(this.y < 0) { playerVel = g; // Prevent the player from going above the game screen } else { playerVel += g; // Adds the "gravitational acceleration" to the player's velocity } this.y += playerVel; // Change the player entities y position based on the player velocity }) .bind("KeyDown", function(event) { // Binds the "KeyDown" event to our player entity if(event.key == Crafty.keys.SPACE){ // If the key is the spacebar then "flap" playerVel = -5; // Sets the player's speed and direction to go upwards } }) .bind("EnterFrame", function() { Crafty("Obstacle").each(function() { if(this.x < -objectWidth) { this.destroy(); } else { this.x -= 3; } }); if(obstacleCounter > 100){ obstacleCounter = 0; newObstacle(); } obstacleCounter++; }); function newObstacle() { var randomHeight = Math.floor((Math.random() * (sceneHeight/2)) + (sceneHeight/3)); var bottomOfTopHalf = playAreaHeight - randomHeight; var topOfBottomHalf = bottomOfTopHalf + (4 * playerSize); // Create the top half of the pipe Crafty.e("Obstacle, 2D, DOM, Color, Solid") .attr({x: sceneWidth, y: 0, w: objectWidth, h: bottomOfTopHalf}) .color("#003319"); // Create the bottom half of the pipe Crafty.e("Obstacle, 2D, DOM, Color, Solid") .attr({x: sceneWidth, y: topOfBottomHalf, w: objectWidth, h: playAreaHeight - topOfBottomHalf}) .color("#003319"); }

Preview

Console Log:

Goal: Adding the collision component and checking for hits

To add the Collision component to our player entity we just add it to the list of components in the .e method.

Crafty.e("Collision, 2D, DOM, Color") // See how we just placed the Collision component here?
        // rest of player here

The Crafty collision component provides two useful bits of functionality for us. We’re going to use a method checkHits which allows us to check for collisions with entities that have a given component, while binding the HitOn event to our player entitiy to execute some code when a collision is detected with entities using the given component.

Let’s add checkHits to our player entity in between our attr and color properties, using it to check for collisions with all entities with the Solid component:

    .attr({ /* attr stuff here */ })
    .checkHits("Solid")
    .color(/* Color stuff here */);

Now that our player entity is checking for hits we can use the HitOn event binding to stop the game when the player collides with something! We bind the HitOn event just like the EnterFrame and KeyDown ones from earlier.

.bind("HitOn", function() {
    Crafty.pause();
})

For now, the game will just pause when a collision happens. We can’t do much else yet because we don’t have any other game states to move to. We now have the core bit of our game working and can move on to have things like a starting menu, score and a game over screen!

For the starting menu and game over screen we will be using game states.